<template>
	<!--  :style="{'paddingTop': titleHeight,'width':'calc(750rpx - '+titleWidth+'px)'}" -->
	<view class="comHead" :style="{'paddingTop': titleHeight}">
		<view class="l">
			<template v-if="isLeft">
				<!-- #ifndef MP-TOUTIAO -->
				<view class="comBack" @click="onBack()">
					<image src="https://siha.vxmeng.com/static/component/fh.png" mode="widthFix"></image>
				</view>
				<!-- #endif -->
				
				<!-- #ifdef MP-TOUTIAO -->
				<view class="comBack">
					<image style="opacity: 0;" src="https://siha.vxmeng.com/static/component/fh.png" mode="widthFix"></image>
				</view>
				<!-- #endif -->
			</template>
			<template v-if="isChat">
				<view class="comBack" @click="slideFun">
					<image style="width: 30rpx;" src="https://siha.oss-cn-beijing.aliyuncs.com/static/social/1.png" mode="widthFix"></image>
				</view>
			</template>
			<template v-if="isMenu">
				<view class="comBack" @click="comLink('/pages/social/set?isQun='+isQun+'&id='+setId)">
					<image style="width: 32rpx;" src="https://siha.oss-cn-beijing.aliyuncs.com/static/social/4.png" mode="widthFix"></image>
				</view>
			</template>
		</view>
		<view class="m">
			<text>{{title}}</text>
		</view>
		<view class="r">
			<template v-if="isRight">
				<view class="social" v-if="rType=='social'">
					<image src="https://siha.vxmeng.com/static/component/1.png" mode="widthFix"></image>
					<image src="https://siha.vxmeng.com/static/component/2.png" mode="widthFix"></image>
				</view>
				<view class="social" v-if="rType=='episode'">
					<image @click="isPop = !isPop" src="https://siha.vxmeng.com/static/component/more.png" mode="widthFix">
					</image>
					<view class="episodePop" v-if="isPop">
						<text @click="comLink('/pages/index/knapsack')">{{$t('index.bb')}}</text>
						<text @click="comLink('/pages/index/shop')">{{$t('index.sc')}}</text>
						<text @click="comLink('/pages/index/memory')">{{$t('index.jysj')}}</text>
					</view>
				</view>
				<view class="knapsack" v-if="rType=='knapsack'">
					<text>{{$t('index.dhm')}}</text>
					<image src="https://siha.vxmeng.com/static/my/r.png" mode="widthFix"></image>
				</view>
				<view class="knapsack" v-if="rType=='rankList'">
					<text>{{$t('index.phjl')}}</text>
					<image src="https://siha.vxmeng.com/static/my/r.png" mode="widthFix"></image>
				</view>
			</template>
		</view>
<!-- 		<button class="share" open-type="share">
			<image src="https://siha.vxmeng.com/static/more/share.png" mode="widthFix"></image>
			<text>分享</text>
		</button> -->
		<view class="slideLeft" v-if="isSlide">
			<view class="box">
				<view class="item" @click="comLink('/pages/social/sponsor')">
					<image src="https://siha.oss-cn-beijing.aliyuncs.com/static/social/2.png" mode="widthFix"></image>
					<text>发起群聊</text>
				</view>
				<view class="item" @click="toTbas">
					<image src="https://siha.oss-cn-beijing.aliyuncs.com/static/social/3.png" mode="widthFix"></image>
					<text>添加朋友</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "comHead",
		props: {
			title: {
				type: String,
				default: "",
			},
			isLeft: {
				type: Boolean,
				default: true,
			},
			isChat: {
				type: Boolean,
				default: false,
			},
			isMenu: {
				type: Boolean,
				default: false,
			},
			isRight: {
				type: Boolean,
				default: false,
			},
			isQun: {
				type: Number,
				default: 1,
			},
			setId: {
				type: Number,
				default: 0,
			},
			rType: {
				type: String,
				default: "",
			}
		},
		data() {
			return {
				isPop: false,
				isSlide:false,
				titleHeight: 0,
				titleWidth: 0,
				dataList: [
					{
						text: '发起群聊',
						// iconSrc: require('https://siha.oss-cn-beijing.aliyuncs.com/static/social/2.png')
						iconSrc: "https://siha.oss-cn-beijing.aliyuncs.com/static/social/2.png"
					},
					{
						text: '添加朋友',
						// iconSrc: require('https://siha.oss-cn-beijing.aliyuncs.com/static/social/3.png')
						iconSrc: 'https://siha.oss-cn-beijing.aliyuncs.com/static/social/2.png'
					}
				]
			};
		},
		mounted() {
			// #ifdef MP-WEIXIN || MP-ALIPAY
			this.getHeight();
			// #endif
			// #ifdef APP
			this.titleHeight = 'var(--status-bar-height)'
			// #endif
			// #ifdef H5
			this.titleHeight = '30px'
			// #endif
		},
		methods: {
			toTbas(){
				this.isSlide = false
				this.$emit('toTbas')
			},
			slideFun(){
				this.isSlide = !this.isSlide
			},
			onBack(){
				this.$music.play_return()
				this.isLeft ? this.$tools.toBack() : ''
			},
			// 获取微信右上角胶囊高度
			getHeight() {
				let res = wx.getMenuButtonBoundingClientRect();
				this.titleHeight = (res.top+5)+'px';
				this.titleWidth = res.width
			}
		}
	}
</script>

<style lang="less" scoped>
	.comHead {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		// padding-top: var(--status-bar-height);
		box-sizing: border-box;
		width: 750rpx;
		z-index: 101;

		.l {
			width: 30%;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.comBack {
				display: flex;
				align-items: center;
				padding: 20rpx;
				position: relative;
				image {
					width: 15rpx;
				}
			}
		}

		.m {
			display: flex;
			align-items: center;
			justify-content: center;

			/* #ifdef MP-TOUTIAO */
			padding-top: 30rpx;
			/* #endif */
			text {
				font-size: 32rpx;
				font-weight: 400;
				color: #D8D8D8;
				text-align: center;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				-webkit-line-clamp: 1;
				 text-overflow: ellipsis;
			}
		}

		.r {
			width:30%;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.social {
				display: flex;
				align-items: center;
				position: relative;

				image {
					width: 40rpx;
					margin-left: 20rpx;
				}

				.episodePop {
					width: 217rpx;
					// height: 300rpx;
					background: #000B1B;
					opacity: 1;
					position: absolute;
					z-index: 100000001;
					color: #D8D8D8;
					font-size: 32rpx;
					right: 0;
					top: 50rpx;
					display: flex;
					flex-direction: column;
					padding: 0 30rpx;
					box-sizing: border-box;
					align-items: center;
					justify-content: center;

					text {
						border-bottom: 2rpx solid #333333;
						padding: 20rpx 0;

						&:last-child {
							border: none;
						}
					}
				}
			}

			.knapsack {
				// width: 160rpx;
				height: 60rpx;
				background: rgba(255, 255, 255, 0.1);
				border-radius: 24rpx 0px 0px 24rpx;
				color: #D8D8D8;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: -30rpx;
				padding: 0 20rpx;

				text {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					-webkit-line-clamp: 1;
					 text-overflow: ellipsis;
				}
				image {
					width: 40rpx;
				}
			}
		}
		.share{
			position: fixed;
			right: 30rpx;
			bottom: 300rpx;
			display: flex;
			align-items: center;
			margin: 0;
			border: none;
			flex-direction: column;
			color: #fff;
			font-size: 26rpx;
			image {
				width: 44rpx;
			}
			&::after{
				border: none;
			}
		}
		.slideLeft{
			position: absolute;
			// top: 0;
			left: 0;
			color: #fff;
			margin-top: 260rpx;
			.box{
				background: url('https://siha.oss-cn-beijing.aliyuncs.com/static/social/jx.png');
				width: 284rpx;
				// height: 204rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				padding-top: 20rpx;
				.item{
					font-size: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					padding: 25rpx 0;
					&:nth-child(1){
						border-bottom: 1rpx solid rgba(210, 210, 210, 0.5);
					}
					image{
						width: 40rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
	}
</style>